<template>
  <div
    ref="content"
    :class="tableEllipsisIsTurnLine?'':'tableEllipsis'"
    :style="{'width': (typeof widthContent === 'number') ? (widthContent+'%') : widthContent}"
  >
    <a-tooltip
      placement="topLeft"
      v-if="isoverflow&&!tableEllipsisIsTurnLine"
      :getPopupContainer="$commonFun.getPopupContainer"
    >
      <template slot="title">
        <span style="white-space:pre-wrap">{{ showText }}</span>
      </template>
      <div>
        <span style="white-space:pre-wrap">{{ showText }}</span>
      </div>
    </a-tooltip>
    <span
      style="white-space:pre-wrap"
      v-else
    >{{ showText }}</span>
  </div>
</template>
<script>
import { mixinElli } from './mixinElli'
export default {
  mixins: [mixinElli],
  props: {
    widthContent: {
      type: [Number, String],
      default: 100
    },
    tableEllipsisIsTurnLine: {
      type: Boolean,
      default: true
    }
  }
}
</script>
<style lang="less" scoped>
.tableEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1
}
</style>
